<template>
    <!--搜索-->
    <el-form :inline="true" :model="formData" class="demo-form-inline">
        <el-form-item label="编号">
            <el-input v-model="formData.id" placeholder="请输入ID编号" clearable />
        </el-form-item>
        <el-form-item label="商品名称">
            <el-input v-model="formData.pname" placeholder="请输入类目名称" clearable />
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="onSubmit">查询</el-button>
        </el-form-item>
    </el-form>

    <!--列表-->
    <el-table :data="tableData" style="width: 100%">
        <el-table-column fixed prop="id" label="编号" width="90" />
        <el-table-column prop="pname" label="商品名" width="160" />
        <el-table-column prop="subname" label="副标题" width="180" />
        <el-table-column prop="imgurl" label="商品图片" width="120">
            <template #default="scope">
                <img :src="scope.row.imgurl" alt="" width="60" height="60">
            </template>
        </el-table-column>
        <el-table-column prop="oldprice" label="最小价格" width="100" />
        <el-table-column prop="newprice" label="最大价格" width="100" />
        <el-table-column prop="color" label="商品颜色" width="100" />
        <el-table-column prop="size" label="商品尺寸" width="100" />
        <el-table-column prop="count" label="商品销量" width="100" />
        <el-table-column prop="status" label="商品状态" width="90">
        </el-table-column>
        <el-table-column prop="statusX" label="状态" width="90">
        </el-table-column>

        <el-table-column prop="category_id" label="父目录ID" width="120" />
        <el-table-column fixed="right" label="操作" width="150">
            <template #default="scope">
                <el-button type="warning" size="small" @click="handleClick(scope.row)">编辑</el-button>
                <el-button type="danger" size="small" v-if="scope.row.status != 0"
                    @click="officeClick(scope.row,'上线',0)">上线</el-button>
                <el-button type="danger" size="small" v-if="scope.row.status != 1"
                    @click="officeClick(scope.row,'下线',1)">下线</el-button>
                <el-button type="danger" size="small" v-if="scope.row.status != 10"
                    @click="officeClick(scope.row,'禁售',10)">禁售</el-button>

            </template>
        </el-table-column>
    </el-table>
    <el-pagination v-model:current-page="pageData.pageNum" v-model:page-size="pageData.pageSize"
        :page-sizes="[4, 10, 15, 20]" layout="total, sizes, prev, pager, next,jumper" :total="pageData.total"
        @size-change="handleSizeChange" @current-change="handleCurrentChange" />
</template>

<script setup>
import { ElMessage, ElMessageBox } from 'element-plus'
import { onMounted, ref, reactive } from 'vue';
// import axios from 'axios';
import { CategoryApi,ProductApi } from '../../api';
const tableData = ref([])
const value = ref(true)
const formData = reactive({
    id: '',
    pname: '',
    ids: []
})
const pageData = reactive({
    total: 0,
    pageSize: 4,
    pageNum: 1
})

onMounted(() => {
    CallProductList()

})

const CallProductList = () => {
    let id = formData.id == '' ? undefined : formData.id;
    let pname = formData.pname == '' ? undefined : formData.pname;
    ProductApi.select.call({
        id: id, pname: pname,
        pageNum: pageData.pageNum,
        pageSize: pageData.pageSize,
        
    }).then(res => { 
        console.log(res);
        tableData.value = res.items
        pageData.total = res.total

        
    })
}

const onSubmit = () => {
    console.log('查询');
    CallProductList()
}
import { useRouter } from 'vue-router';
const router = useRouter()

const handleClick = (row) => {
    console.log('编辑', row.id)
    router.push({ name: 'productEdit', query: { id: row.id } })
}

const officeClick = (row,optionName,status) => {
    console.log("下线", row);
    ElMessageBox.confirm(
        '您确认对-' + row.pname + '进行：' + optionName + '操作?',
        '警告！',
        {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(() => {
            ProductApi.patch.call({ id: row.id,status:status }).then(res => { 
                ElMessage({
                    type: 'success',
                    message:  optionName +'成功，可在后台编辑上线',
                   
                })
                //回调函数 ，重新刷新数据
                CallProductList()
            })
        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: '取消成功，如需下线请重新选择',
            })
        })
}

// const offjsClick = (row) => { 
//     console.log("禁售", row);
//     ElMessageBox.confirm(
//         '您是否要对' + row.pname + '进行禁售操作?',
//         '警告！',
//         {
//             confirmButtonText: '确认',
//             cancelButtonText: '取消',
//             type: 'warning',
//         }
//     )
//         .then(() => {
//             ProductApi.delete.call({ id: row.id ,status:10}).then(res => {
//                 ElMessage({
//                     type: 'success',
//                     message:'禁售成功，可在后台编辑上线',

//                 })
//             })
//         })
// }
const handleSizeChange = (val) => {

    pageData.pageSize = val
    CallProductList()
}
const handleCurrentChange = (val) => {
    pageData.pageNum = val
    CallProductList()
}
</script>

<style scoped></style>